<script setup lang="ts">
import SInfo from '@/components/common/info/SInfo.vue'
import { useInfo } from '@/composables/info-composable'
import type { ResultData } from '@/api/service'
import { permInfoApi, savePermApi } from '@/api/perm'
import type { PermDto, PermVo } from '@/type/system/perm-types'
import { ElNotification } from 'element-plus'


const props = defineProps<{
  query: { permId?: string },
  close: () => void,
}>()

const { statement, infoLoading, infoData, validErrors } = useInfo<PermVo>('PermInfo', getData)

function getData() {
  if (props.query.permId !== undefined) {
    infoLoading.value = true
    // 页面传递userId, 调用接口查询数据回显
    permInfoApi(props.query.permId).then((response: ResultData<PermVo>) => {
      infoData.value = response.data
      infoLoading.value = false
    })
  }
}

function save() {
  const param: PermDto = {
    permId: props.query.permId,
    permName: infoData.value.permName,
    permKey: infoData.value.permKey,
    order: infoData.value.order,
    status: infoData.value.status,
  }
  savePermApi(param).then(() => {
    ElNotification.success({
      title: '成功',
      message: '保存菜单成功',
      type: 'success'
    })
    props.close()
  }).catch((err) => {
    if (err.code === 438) {
      validErrors(err.data)
    }
  })
}

const methods = {}
</script>

<template>
  <div class="s-button-list">
    <el-button @click="save" type="primary">保存</el-button>
  </div>
  <s-info
    :data="infoData"
    :form-loading="infoLoading"
    :methods="methods"
    :statement="statement"
    :show-button="false"
  >
  </s-info>
</template>

<style scoped>
.s-button-list {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>
